<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>用户登陆</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script src="${APP_PATH}/static/js/jquery_min_341.js"></script>
<link
	href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="${APP_PATH}/static/layui/css/layui.css">

<link
	href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css"
	rel="stylesheet">

<script
	src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
<style type="text/css">
.food {
	margin: auto
}
</style>
<script type="text/javascript">
	function registerCount() {
		var user = $("#loginname").val();
		var password = $("#password").val();
		var tel = $("#tel").val();
		var name = $("#name").val();
		var address = $("#address").val();
		var identity = $("*[name='identity']").val();
		if (user == null || password == null || tel == null
				|| enterPassword == null || name == null || address == null
				|| identity == null) {
			alert("请完善相关信息,您当前的信息为:" + user + password + tel + name + address
					+ identity);
			return false;
		}

		return true;
	}
</script>
</head>

<body class="layui-layout-body" style="overflow: scroll;">
	<div class="page-header" style="background-color: #C0C1C4"
		align="center">
		<h1 style="color: #477EAD;">${user.name}
			<br> <small>用户登陆页面</small>
		</h1>
	</div>

	<div class="layui-carousel" style="margin: auto; opacity: 0.9"
		id="test1">
		<div carousel-item style="opacity: 1.0">
			<div align="center">
				<img name="food" src="static/food/food1.jpg">
			</div>
			<div align="center">
				<img name="food" src="static/food/food2.jpg">
			</div>
			<div align="center">
				<img name="food" src="static/food/food3.jpg">
			</div>
			<div align="center">
				<img name="food" src="static/food/food4.jpg">
			</div>
			<div align="center">

				<img name="food" src="static/food/food5.jpg">
			</div>
			<div align="center">

				<img name="food" src="static/food/food6.jpg">
			</div>
			<div align="center">

				<img name="food" src="static/food/food7.jpg">
			</div>
			<div align="center">
				<img name="food" src="static/food/food8.jpg">
			</div>
			<div align="center">
				<img name="food" src="static/food/food9.jpg">
			</div>
			<div align="center">
				<img name="food" src="static/food/food10.jpg">
			</div>

		</div>
	</div>


	<div class="layui-tab layui-tab-brief" lay-filter="demo" align="center"
		style="height: 400px">
		<ul class="layui-tab-title" align="center">
			<li class="layui-this" lay-id="11">浏览商家</li>
			<li lay-id="22">浏览商品</li>
			<li lay-id="33">购物车管理</li>
			<li lay-id="55">订单管理</li>
			<li lay-id="44">个人管理</li>
		</ul>
		<div class="layui-tab-content" align="center" style="height: 400px">
			<div class="layui-tab-item layui-show">
				此处是浏览商家列表
				<table border="1" class="layui-table">
					<tr>
						<th>姓名</th>
						<th>电话号码</th>
						<th>地址</th>
						<th>身份</th>
						<th>操作</th>
					</tr>
					<c:forEach items="${list1}" var="bus">
						<tr>
							<td>${bus.name}</td>
							<td>${bus.tel}</td>
							<td>${bus.address}</td>
							<td>${bus.identity}</td>
							<td>
								<div class="site-demo-button" style="margin-bottom: 0;">
									<button class="layui-btn site-demo-active"
										data-type="tabChange" id="bussid"
										onclick="clickbus(${bus.id})" name="${bus.id}">进入商家</button>
								</div>
							</td>
						</tr>
					</c:forEach>
				</table>


			</div>
			<div class="layui-tab-item">
				此处是商品列表

				<table class="layui-hide" id="table03" lay-filter="table03"></table>


			</div>
			<div class="layui-tab-item">
				此处是购物车列表

				<table border="1" class="layui-table"">
					<tr>
						<th>用户编号</th>
						<th>商家编号</th>
						<th>商品编号</th>
						<th>购买数量</th>
						<th>价格</th>
					</tr>
					<c:forEach items="${list3}" var="com">
						<tr>
							<td>${com.user}</td>
							<td>${com.business}</td>
							<td>${com.commodity}</td>
							<td>${com.number}</td>
							<td>${com.price}</td>
							<td><a href="querybyId?id=${com.id }">加入订单</a></td>
						</tr>
					</c:forEach>
				</table>
				<div id="test100"></div>
				<script src="${APP_PATH}/static/layui/layui.js"></script>
				<script>
					layui.use('laypage', function(){
 					 var laypage = layui.laypage;
  					var list99 = ${list3size};
  					laypage.render({
   						 elem: 'test100' //注意，这里的 test1 是 ID，不用加 # 号
    					,count: list99 //数据总数，从服务端得到
  					 });
						});
				</script>



			</div>
			
			
			
			<div class="layui-tab-item" >
			<table border="1" class="layui-table">
					<tr>
						<th>用户编号</th>
						<th>商家编号</th>
						<th>价格</th>
						<th>电话</th>
						<th>地址</th>
						<th>状态</th>
					</tr>
					<c:forEach items="${list4}" var="o">
						<tr>
							<td>${o.user}</td>
							<td>${o.business}</td>
							<td>${o.price}</td>
							<td>${o.tel}</td>
							<td>${o.address}</td>
							<td>${o.status}</td>
						</tr>
					</c:forEach>
				</table>
			
			</div>
			
			
			<div class="layui-tab-item">
				<form action="updateUser"  method="post" onsubmit="return registerCount()"
					style="margin-left: auto; margin-right: auto; width: 400px"
					id="register">
					<div class="form-group">
						<label for="id" style="display:inline;">ID：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<input type="text"   class="form-control"
							id="id" name="id" readonly="readonly"
							style="display: inline; width: 200px;" autocomplete="off"
							value="${user.id}" placeholder="${user.id}" /><br />
					</div>


					<div class="form-group">
						<label for="loginname" style="display:inline;">账户：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<input type="text"  readonly="readonly"  class="form-control"
							id="loginname" name="loginname"
							style="display: inline; width: 200px;" autocomplete="off"
							value="${user.loginname}" placeholder="${user.loginname}" /><br />
						<span id="username_span"></span>
					</div>
					<div class="form-group">
						<label for="password" style="display: inline;">密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<input type="password" class="form-control" id="password"
							name="password" style="display: inline; width: 200px;"
							value="${user.password}" autocomplete="off"
							placeholder="${user.password}" />
					</div>

					<div class="form-group">
						<label for="name" style="display: inline;">姓名：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<input type="text" class="form-control" id="name" name="name"
							style="display: inline; width: 200px;" placeholder="${user.name}"
							value="${user.name}" autocomplete="off" />
					</div>

					<div class="form-group">
						<label for="tel" style="display: inline;">联系电话：</label> <input
							type="text"
							onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
							maxlength="11" class="form-control" id="tel" name="tel"
							style="display: inline; width: 200px;" autocomplete="off"
							value="${user.tel}" placeholder="${user.tel}" />
					</div>
					<div class="form-group">
						<label for="address" style="display: inline;">联系地址：</label> <input
							type="text" class="form-control" id="address" name="address"
							style="display: inline; width: 200px;" autocomplete="off"
							value="${user.address}" placeholder="${user.address}" />
					</div>

					<div class="form-group">
						<label for="identity" style="display: inline;">身份：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<input type="text"  readonly="readonly" class="form-control" id="identity"
							name="identity" style="display: inline; width: 200px;"
							autocomplete="off" value="${user.identity}"
							placeholder="${user.identity}" />
					</div>

					<input type="submit" rel="external nofollow"
						class="btn btn-primary" value="保存"> <input type="button"
						rel="external nofollow" data-dismiss="modal" class="btn"
						value="关闭">
				</form>
			</div>
		</div>
	</div>

	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>

	<script type="text/html" id="barDemo01">
	    <a class="layui-btn layui-btn-xs" lay-event="edit">加入购物车</a>
	  </script>


	<script>
	
	var uid =1;
	
   function clickbus(uid01) {
	        $.ajax({
	            async: false,
	            success: function() {
	            	uid = uid01;
					console.log(uid);
					layui.use([ 'jquery','element', 'layer', 'table'], function() {
						  element = layui.element;
						var $ = layui.jquery;
						var layer = layui.layer;
						var table = layui.table;
						console.log(uid);
						table.render({
							elem : '#table03',
							url : 'queryBybusiness',
							where : {
								id : uid
							}
							/*    ,request: {
							  		pageName: 'page' //页码的参数名称，默认：page
							   	,limitName: 'limit' //每页数据量的参数名，默认：limit
							  	} */
							,
							title : '商品表',
							cols : [ [

							{
								type : 'checkbox',
								fixed : 'left'
							}, {
								field : 'id',
								title : 'ID'
							}, {
								field : 'business',
								title : '商家名'
							} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
							, {
								field : 'name',
								title : '名称'
							}, {
								field : 'describe',
								title : '描述'
							}, {
								field : 'price',
								title : '价格'
							},{
								fixed : 'right',
								align:'center',
								 toolbar: '#barDemo01'

							} 
							
							
							] ],
							page : true

						});
					
					
					
					  //监听表格复选框选择
					  table.on('checkbox(table03)', function(obj){
					    console.log(obj)
					  });
					  //监听工具条
					  table.on('tool(table03)', function(obj){
					    var data = obj.data;
					   if(obj.event === 'edit'){
						   
						   var businessid = data.business;
							var userid =${user.id};
							var commodityid =data.id;
							console.log(businessid);
							console.log(userid);
							console.log(commodityid);
							$.ajax({
								type : "post", //post put get 等等
								url : "addCart",
								async : false,
								data : { //要传入文件的数据
									"user" : userid,
									"business" : businessid,
									"commodity":commodityid,
									"number" : "1",
									"price" : data.price,
								},
								success : function(data) { 
									element.tabChange('demo', '33');
									table.render();
								}
								
										});						   
					    			}
					  });
					}
					)
				
					}})}
	    
	
	   
	layui.use('element', function(){
		  var $ = layui.jquery
		  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
		  
		  //触发事件
		  var active = {
		    tabChange: function(){
		      //切换到指定Tab项
		      element.tabChange('demo', '22'); //切换到：用户管理
		    
		    }
		  };
		  
		  $('.site-demo-active').on('click', function(){
		    var othis = $(this), type = othis.data('type');
		    active[type] ? active[type].call(this, othis) : '';
		  });
		  
		  //Hash地址的定位
		  var layid = location.hash.replace(/^#test=/, '');
		  element.tabChange('test', layid);
		  
		  element.on('tab(test)', function(elem){
		    location.hash = 'test='+ $(this).attr('lay-id');
		  });
		  
		});
		//JavaScript代码区域
		layui.use('carousel', function() {
			var carousel = layui.carousel;
			//建造实例
			carousel.render({
				elem : '#test1',
				width : '50%' //设置容器宽度
				,
				arrow : 'always' //始终显示箭头
				,
				anim : 'default' //切换动画方式
				,
				interval : '2000'
			});
		});
		layui.use('element', function() {
			var element = layui.element;

			//一些事件监听
			element.on('tab(demo)', function(data) {
				console.log(data);
			});
		});
		
	
	</script>
</body>
</html>
